<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>520电子烟花 - 阅丞集团 & 阅丞淮西科技集团-思丞制造</title>
    <style>
        :root {
            --primary-color: #ff69b4;
            --secondary-color: #ff1493;
            --error-color: #ff5555;
            --success-color: #4CAF50;
            --text-color: #ffffff;
            --text-secondary: #cccccc;
            --bg-color: #000000;
            --card-bg: rgba(30, 30, 30, 0.8);
            --card-border: 1px solid rgba(255, 105, 180, 0.3);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            touch-action: manipulation;
            overscroll-behavior: none;
        }
        
        /* 加载页面样式 */
        .loading-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: var(--bg-color);
            z-index: 1000;
            transition: opacity 0.5s ease;
        }
        
        .loading-content {
            text-align: center;
            max-width: 90%;
        }
        
        .loading-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
            background: radial-gradient(circle, var(--primary-color), var(--secondary-color));
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            font-size: 1.5em;
            box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
            animation: pulse 2s infinite;
        }
        
        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 6px solid rgba(255, 105, 180, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1.5s linear infinite;
            margin: 0 auto 25px;
        }
        
        .loading-text {
            font-size: 1.2em;
            color: var(--text-secondary);
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .loading-progress {
            width: 80%;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            margin: 20px auto;
            overflow: hidden;
        }
        
        .loading-progress-bar {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            transition: width 0.3s ease;
            border-radius: 3px;
        }
        
        /* 验证动画 */
        .check-animation {
            width: 120px;
            height: 120px;
            margin: 25px auto;
            position: relative;
            display: none;
        }
        
        .check-success {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .check-success::before, .check-success::after {
            content: '';
            position: absolute;
            background-color: var(--success-color);
            border-radius: 3px;
            box-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
        }
        
        .check-success::before {
            width: 30%;
            height: 60%;
            left: 32%;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
            transform-origin: left bottom;
            animation: check-before 0.6s ease forwards;
        }
        
        .check-success::after {
            width: 60%;
            height: 30%;
            left: 32%;
            top: 50%;
            transform: translateY(-50%) rotate(-45deg);
            transform-origin: left bottom;
            animation: check-after 0.6s 0.6s ease forwards;
        }
        
        .check-fail {
            width: 100%;
            height: 100%;
            position: relative;
            display: none;
        }
        
        .check-fail::before, .check-fail::after {
            content: '';
            position: absolute;
            background-color: var(--error-color);
            border-radius: 3px;
            box-shadow: 0 0 15px rgba(244, 67, 54, 0.8);
            top: 50%;
            left: 50%;
            width: 80%;
            height: 18%;
            margin-top: -9%;
            margin-left: -40%;
        }
        
        .check-fail::before {
            transform: rotate(45deg);
            animation: fail-before 0.6s ease forwards;
        }
        
        .check-fail::after {
            transform: rotate(-45deg);
            animation: fail-after 0.6s ease forwards;
        }
        
        /* 验证弹窗 */
        .verification-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1100;
            padding: 20px;
        }
        
        .modal-content {
            background-color: var(--card-bg);
            border: var(--card-border);
            border-radius: 15px;
            padding: 25px;
            width: 90%;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 0 30px rgba(255, 105, 180, 0.3);
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s ease;
        }
        
        .modal-show .modal-content {
            transform: translateY(0);
            opacity: 1;
        }
        
        .modal-title {
            color: var(--primary-color);
            font-size: 1.6em;
            margin-bottom: 15px;
            text-shadow: 0 0 10px var(--secondary-color);
        }
        
        .modal-message {
            margin-bottom: 25px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        
        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .modal-btn {
            padding: 12px 25px;
            border: none;
            border-radius: 30px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 120px;
            font-weight: bold;
        }
        
        .modal-btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
        }
        
        .modal-btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(255, 105, 180, 0.8);
        }
        
        .modal-btn-secondary {
            background: linear-gradient(135deg, #555, #333);
            color: white;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }
        
        .modal-btn-secondary:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
        }
        
        /* 感谢页面 */
        .thank-you-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1200;
            text-align: center;
            padding: 20px;
        }
        
        .thank-you-content {
            max-width: 90%;
        }
        
        .thank-you-title {
            color: var(--primary-color);
            font-size: 2em;
            margin-bottom: 30px;
            text-shadow: 0 0 15px var(--secondary-color);
            line-height: 1.4;
        }
        
        .countdown {
            font-size: 1.2em;
            color: var(--text-secondary);
            margin-top: 20px;
        }
        
        /* 输入页面样式 */
        .input-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 900;
            transition: opacity 0.6s ease;
            padding: 20px;
        }
        
        .input-card {
            background-color: var(--card-bg);
            border: var(--card-border);
            border-radius: 15px;
            padding: 30px;
            width: 100%;
            max-width: 450px;
            text-align: center;
            box-shadow: 0 0 40px rgba(255, 105, 180, 0.2);
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.5s ease 0.3s;
        }
        
        .input-show .input-card {
            transform: translateY(0);
            opacity: 1;
        }
        
        .input-title {
            color: var(--primary-color);
            font-size: 2.2em;
            margin-bottom: 20px;
            text-shadow: 0 0 15px var(--secondary-color);
        }
        
        .input-subtitle {
            font-size: 1.1em;
            margin-bottom: 30px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        
        .input-group {
            margin-bottom: 25px;
            width: 100%;
        }
        
        .input-field {
            width: 100%;
            padding: 15px 20px;
            font-size: 1.1em;
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid var(--primary-color);
            border-radius: 10px;
            color: var(--text-color);
            text-align: center;
            transition: all 0.3s;
        }
        
        .input-field:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 20px rgba(255, 20, 147, 0.5);
            outline: none;
        }
        
        .input-error {
            color: var(--error-color);
            font-size: 0.9em;
            margin-top: 10px;
            display: none;
        }
        
        .submit-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.1em;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            max-width: 220px;
            margin: 0 auto;
            box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
            font-weight: bold;
        }
        
        .submit-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(255, 105, 180, 0.8);
        }
        
        /* 烟花页面样式 */
        .fireworks-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 800;
        }
        
        .fireworks-canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            image-rendering: pixelated;
        }
        
        .final-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            font-size: clamp(2em, 8vw, 3.5em);
            color: var(--primary-color);
            text-shadow: 0 0 20px var(--secondary-color), 0 0 40px rgba(255, 0, 255, 0.7);
            text-align: center;
            opacity: 0;
            z-index: 2;
            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            width: 90%;
            line-height: 1.3;
            font-weight: bold;
            pointer-events: none;
        }
        
        .footer {
            position: fixed;
            bottom: 15px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 0.8em;
            color: #666;
            z-index: 3;
            padding: 0 15px;
        }
        
        .copyright {
            margin-top: 5px;
            font-size: 0.8em;
            line-height: 1.5;
        }
        
        /* 动画定义 */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        
        @keyframes check-before {
            from { height: 0; }
            to { height: 60%; }
        }
        
        @keyframes check-after {
            from { width: 0; }
            to { width: 60%; }
        }
        
        @keyframes fail-before {
            from { transform: rotate(0) scale(0); }
            to { transform: rotate(45deg) scale(1); }
        }
        
        @keyframes fail-after {
            from { transform: rotate(0) scale(0); }
            to { transform: rotate(-45deg) scale(1); }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        /* 性能优化样式 */
        .will-change {
            will-change: transform, opacity;
        }
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .input-card {
                padding: 25px 20px;
            }
            
            .input-title {
                font-size: 1.8em;
            }
            
            .modal-btn {
                padding: 10px 20px;
                min-width: 110px;
            }
            
            .footer {
                font-size: 0.7em;
            }
        }
    </style>
</head>
<body>
    <!-- 加载页面 -->
    <div class="loading-container" id="loadingScreen">
        <div class="loading-content">
            <div class="loading-logo">520</div>
            <div class="loading-spinner"></div>
            <div class="loading-text" id="loadingText">正在验证访问权限...</div>
            <div class="loading-progress">
                <div class="loading-progress-bar" id="loadingProgress"></div>
            </div>
            <div class="check-animation">
                <div class="check-success" id="checkSuccess"></div>
                <div class="check-fail" id="checkFail"></div>
            </div>
        </div>
        <div class="footer">
            <div class="copyright">版权所有 © <span id="copyrightYear1"></span> 阅丞集团 & 阅丞淮西科技集团</div>
            <div class="copyright">技术支持：阅丞数字创意中心</div>
        </div>
    </div>
    
    <!-- 验证弹窗 -->
    <div class="verification-modal" id="verificationModal">
        <div class="modal-content">
            <div class="modal-title" id="modalTitle">日期验证失败</div>
            <div class="modal-message" id="modalMessage"></div>
            <div class="modal-buttons">
                <button class="modal-btn modal-btn-primary" id="confirmBtn">继续使用</button>
                <button class="modal-btn modal-btn-secondary" id="cancelBtn">退出</button>
                <button class="modal-btn modal-btn-secondary" id="retryBtn" style="display:none">重新验证</button>
            </div>
        </div>
        <div class="footer">
            <div class="copyright">版权所有 © <span id="copyrightYear2"></span> 阅丞集团 & 阅丞淮西科技集团</div>
        </div>
    </div>
    
    <!-- 感谢页面 -->
    <div class="thank-you-page" id="thankYouPage">
        <div class="thank-you-content">
            <h1 class="thank-you-title">感谢使用<br>阅丞集团 & 阅丞淮西科技集团<br>520电子烟花</h1>
            <div class="countdown" id="countdown">页面将在5秒后关闭...</div>
        </div>
        <div class="footer">
            <div class="copyright">版权所有 © <span id="copyrightYear3"></span> 阅丞集团 & 阅丞淮西科技集团</div>
            <div class="copyright">Yuecheng Group & Yuecheng Huaixi Technology Group</div>
        </div>
    </div>
    
    <!-- 输入页面 -->
    <div class="input-container" id="inputScreen">
        <div class="input-card">
            <h1 class="input-title">520 终极电子烟花</h1>
            <p class="input-subtitle">在<span id="currentYear"></span>年的这个特别日子<br>为心爱的人绽放专属烟花</p>
            <div class="input-group">
                <input type="text" class="input-field" id="loverName" placeholder="请输入你爱人的名字" autocomplete="off">
                <div class="input-error" id="inputError">请输入名字后再继续</div>
            </div>
            <button class="submit-btn" id="submitBtn">点燃专属烟花</button>
        </div>
        <div class="footer">
            <div class="copyright">版权所有 © <span id="copyrightYear4"></span> 阅丞集团 & 阅丞淮西科技集团</div>
            <div class="copyright">本产品受知识产权法保护</div>
        </div>
    </div>
    
    <!-- 烟花页面 -->
    <div class="fireworks-container" id="fireworksScreen">
        <canvas class="fireworks-canvas" id="fireworksCanvas"></canvas>
        <div class="final-message" id="finalMessage"></div>
        <div class="footer">
            <div class="copyright">版权所有 © <span id="copyrightYear5"></span> 阅丞集团 & 阅丞淮西科技集团</div>
            <div class="copyright">Yuecheng Group & Yuecheng Huaixi Technology Group</div>
        </div>
    </div>
    
    <script>
        // 性能优化：使用requestAnimationFrame的兼容写法
        const requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   window.mozRequestAnimationFrame ||
                   function(callback) {
                       window.setTimeout(callback, 1000 / 60);
                   };
        })();
        
        // 性能优化：节流函数
        function throttle(fn, delay) {
            let lastCall = 0;
            return function(...args) {
                const now = new Date().getTime();
                if (now - lastCall < delay) return;
                lastCall = now;
                return fn.apply(this, args);
            };
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const loadingScreen = document.getElementById('loadingScreen');
            const loadingText = document.getElementById('loadingText');
            const loadingProgress = document.getElementById('loadingProgress');
            const checkSuccess = document.getElementById('checkSuccess');
            const checkFail = document.getElementById('checkFail');
            const checkAnimation = document.querySelector('.check-animation');
            const verificationModal = document.getElementById('verificationModal');
            const modalContent = document.querySelector('.modal-content');
            const modalTitle = document.getElementById('modalTitle');
            const modalMessage = document.getElementById('modalMessage');
            const confirmBtn = document.getElementById('confirmBtn');
            const cancelBtn = document.getElementById('cancelBtn');
            const retryBtn = document.getElementById('retryBtn');
            const thankYouPage = document.getElementById('thankYouPage');
            const countdown = document.getElementById('countdown');
            const inputScreen = document.getElementById('inputScreen');
            const inputCard = document.querySelector('.input-card');
            const currentYearEl = document.getElementById('currentYear');
            const loverNameInput = document.getElementById('loverName');
            const inputError = document.getElementById('inputError');
            const submitBtn = document.getElementById('submitBtn');
            const fireworksScreen = document.getElementById('fireworksScreen');
            const finalMessage = document.getElementById('finalMessage');
            
            // 设置年份
            const currentYear = new Date().getFullYear();
            currentYearEl.textContent = currentYear;
            // 设置所有版权年份
            for (let i = 1; i <= 5; i++) {
                document.getElementById(`copyrightYear${i}`).textContent = currentYear;
            }
            
            // 初始化烟花画布
            const canvas = document.getElementById('fireworksCanvas');
            const ctx = canvas.getContext('2d', { alpha: false }); // 禁用alpha通道提升性能
            let canvasWidth = window.innerWidth;
            let canvasHeight = window.innerHeight;
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            
            // 烟花和粒子数组
            let fireworks = [];
            let particles = [];
            let loverName = '';
            let isDateValid = false;
            let isOnline = navigator.onLine;
            let verificationAttempts = 0;
            const maxVerificationAttempts = 3;
            
            // 高级颜色数组
            const colors = [
                '#ff69b4', '#ff1493', '#ff00ff', '#ff00aa', 
                '#ff0066', '#ff0033', '#ff0000', '#ff3300',
                '#ff6600', '#ff9900', '#ffcc00', '#ffff00',
                '#00ff00', '#00ffff', '#0066ff', '#3300ff',
                '#ff3388', '#ff33cc', '#cc33ff', '#8833ff'
            ];
            
            // 模拟加载进度
            function simulateLoading() {
                let progress = 0;
                const loadingSteps = [
                    { text: "正在初始化系统...", progress: 20 },
                    { text: "正在验证设备兼容性...", progress: 40 },
                    { text: "正在加载资源...", progress: 60 },
                    { text: "正在验证日期...", progress: 80 },
                    { text: "准备就绪...", progress: 100 }
                ];
                
                let currentStep = 0;
                const interval = setInterval(() => {
                    if (currentStep < loadingSteps.length) {
                        const step = loadingSteps[currentStep];
                        loadingText.textContent = step.text;
                        
                        // 平滑过渡到下一步的进度
                        const targetProgress = step.progress;
                        const stepProgress = Math.min(progress + 2, targetProgress);
                        progress = stepProgress;
                        loadingProgress.style.width = `${progress}%`;
                        
                        if (progress >= targetProgress) {
                            currentStep++;
                        }
                    } else {
                        clearInterval(interval);
                        verifyDate();
                    }
                }, 200);
            }
            
            // 联网验证日期
            function verifyDateOnline() {
                return new Promise((resolve, reject) => {
                    if (!isOnline) {
                        reject(new Error("无网络连接"));
                        return;
                    }
                    
                    // 模拟API请求，实际应用中替换为真实API调用
                    setTimeout(() => {
                        const now = new Date();
                        const month = now.getMonth() + 1;
                        const day = now.getDate();
                        
                        // 模拟API返回当前日期
                        resolve({
                            year: now.getFullYear(),
                            month: month,
                            day: day,
                            is520: month === 5 && day === 20
                        });
                    }, 1000);
                });
            }
            
            // 验证日期
            async function verifyDate() {
                verificationAttempts++;
                loadingText.textContent = `正在验证日期(尝试 ${verificationAttempts}/${maxVerificationAttempts})...`;
                
                try {
                    // 尝试联网验证
                    const dateInfo = await verifyDateOnline();
                    const now = new Date();
                    const month = dateInfo.month;
                    const day = dateInfo.day;
                    const is520 = dateInfo.is520;
                    
                    checkAnimation.style.display = 'block';
                    
                    if (is520) {
                        // 日期正确
                        isDateValid = true;
                        checkSuccess.style.display = 'block';
                        loadingText.textContent = `日期验证通过 - ${currentYear}年5月20日`;
                        
                        setTimeout(() => {
                            showInputScreen();
                        }, 1500);
                    } else {
                        // 日期不正确
                        isDateValid = false;
                        checkFail.style.display = 'block';
                        loadingText.textContent = `日期验证未通过 - ${month}月${day}日`;
                        
                        setTimeout(() => {
                            showVerificationModal(
                                '日期验证失败',
                                `当前日期是${month}月${day}日，不是5月20日。是否继续使用？`,
                                true
                            );
                        }, 1500);
                    }
                } catch (error) {
                    // 网络验证失败，回退到本地验证
                    console.log("联网验证失败，回退到本地验证:", error.message);
                    verifyDateLocal();
                }
            }
            
            // 本地验证日期
            function verifyDateLocal() {
                const now = new Date();
                const month = now.getMonth() + 1;
                const day = now.getDate();
                
                checkAnimation.style.display = 'block';
                
                if (month === 5 && day === 20) {
                    // 日期正确
                    isDateValid = true;
                    checkSuccess.style.display = 'block';
                    loadingText.textContent = `本地验证通过 - ${currentYear}年5月20日`;
                    
                    setTimeout(() => {
                        showInputScreen();
                    }, 1500);
                } else {
                    // 日期不正确
                    isDateValid = false;
                    checkFail.style.display = 'block';
                    loadingText.textContent = `本地验证未通过 - ${month}月${day}日`;
                    
                    if (verificationAttempts < maxVerificationAttempts) {
                        setTimeout(() => {
                            showVerificationModal(
                                '验证失败',
                                `本地验证未通过 (${month}月${day}日)，是否重试验证？`,
                                false
                            );
                        }, 1500);
                    } else {
                        setTimeout(() => {
                            showVerificationModal(
                                '验证失败',
                                `无法验证日期 (${month}月${day}日)，是否继续使用？`,
                                true
                            );
                        }, 1500);
                    }
                }
            }
            
            // 显示验证弹窗
            function showVerificationModal(title, message, showContinue) {
                loadingScreen.style.opacity = '0';
                setTimeout(() => {
                    loadingScreen.style.display = 'none';
                    
                    modalTitle.textContent = title;
                    modalMessage.textContent = message;
                    retryBtn.style.display = showContinue ? 'none' : 'block';
                    confirmBtn.style.display = showContinue ? 'block' : 'none';
                    
                    verificationModal.style.display = 'flex';
                    setTimeout(() => {
                        verificationModal.classList.add('modal-show');
                    }, 50);
                }, 500);
            }
            
            // 隐藏验证弹窗
            function hideVerificationModal() {
                verificationModal.classList.remove('modal-show');
                setTimeout(() => {
                    verificationModal.style.display = 'none';
                }, 400);
            }
            
            // 显示输入页面
            function showInputScreen() {
                loadingScreen.style.opacity = '0';
                setTimeout(() => {
                    loadingScreen.style.display = 'none';
                    inputScreen.style.display = 'flex';
                    setTimeout(() => {
                        inputScreen.classList.add('input-show');
                        loverNameInput.focus();
                    }, 50);
                }, 500);
            }
            
            // 隐藏输入页面
            function hideInputScreen() {
                inputScreen.classList.remove('input-show');
                setTimeout(() => {
                    inputScreen.style.display = 'none';
                }, 500);
            }
            
            // 显示烟花页面
            function showFireworksScreen() {
                fireworksScreen.style.display = 'block';
                startFireworks();
            }
            
            // 显示感谢页面
            function showThankYouPage() {
                thankYouPage.style.display = 'flex';
                
                // 5秒倒计时
                let seconds = 5;
                countdown.textContent = `页面将在${seconds}秒后关闭...`;
                
                const timer = setInterval(() => {
                    seconds--;
                    countdown.textContent = `页面将在${seconds}秒后关闭...`;
                    
                    if (seconds <= 0) {
                        clearInterval(timer);
                        closePage();
                    }
                }, 1000);
            }
            
            // 关闭页面
            function closePage() {
                // 尝试关闭窗口
                try {
                    window.close();
                } catch (e) {
                    // 如果无法关闭，至少清空页面
                    document.body.innerHTML = `
                        <div style="
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #000;
                            color: #ff69b4;
                            font-size: 1.5em;
                            text-align: center;
                            padding: 20px;
                        ">
                            页面已关闭<br>
                            <span style="font-size:0.8em;color:#666;margin-top:20px;">
                                版权所有 © ${currentYear} 阅丞集团 & 阅丞淮西科技集团<br>
                                Yuecheng Group & Yuecheng Huaixi Technology Group
                            </span>
                        </div>
                    `;
                }
            }
            
            // 事件监听
            confirmBtn.addEventListener('click', function() {
                hideVerificationModal();
                showInputScreen();
            });
            
            cancelBtn.addEventListener('click', function() {
                hideVerificationModal();
                showThankYouPage();
            });
            
            retryBtn.addEventListener('click', function() {
                hideVerificationModal();
                loadingScreen.style.display = 'flex';
                loadingScreen.style.opacity = '1';
                verifyDate();
            });
            
            submitBtn.addEventListener('click', function() {
                loverName = loverNameInput.value.trim();
                
                if (loverName === '') {
                    inputError.style.display = 'block';
                    loverNameInput.style.borderColor = 'var(--error-color)';
                    return;
                }
                
                inputError.style.display = 'none';
                loverNameInput.style.borderColor = 'var(--primary-color)';
                hideInputScreen();
                showFireworksScreen();
            });
            
            loverNameInput.addEventListener('input', function() {
                if (this.value.trim() !== '') {
                    inputError.style.display = 'none';
                    this.style.borderColor = 'var(--primary-color)';
                }
            });
            
            // 高级随机数函数
            function random(min, max, isInt = false) {
                const value = Math.random() * (max - min) + min;
                return isInt ? Math.floor(value) : value;
            }
            
            // 高级粒子类
            class Particle {
                constructor(x, y, color, isSpecial = false) {
                    this.x = x;
                    this.y = y;
                    this.color = color;
                    this.radius = isSpecial ? random(3, 7) : random(1.5, 3.5);
                    this.velocity = {
                        x: random(-10, 10),
                        y: random(-10, 10)
                    };
                    this.alpha = 1;
                    this.decay = random(0.008, 0.015);
                    this.life = 0;
                    this.maxLife = random(100, 200);
                    this.isSpecial = isSpecial;
                    this.angle = random(0, Math.PI * 2);
                    this.rotationSpeed = random(-0.1, 0.1);
                }
                
                draw() {
                    ctx.save();
                    ctx.globalAlpha = this.alpha;
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.angle);
                    
                    if (this.isSpecial) {
                        // 特殊粒子 - 星形
                        ctx.beginPath();
                        const spikes = 5;
                        const outerRadius = this.radius;
                        const innerRadius = outerRadius * 0.5;
                        
                        for (let i = 0; i < spikes; i++) {
                            const outerX = outerRadius * Math.cos(i * 2 * Math.PI / spikes);
                            const outerY = outerRadius * Math.sin(i * 2 * Math.PI / spikes);
                            const innerX = innerRadius * Math.cos((i * 2 + 1) * Math.PI / spikes);
                            const innerY = innerRadius * Math.sin((i * 2 + 1) * Math.PI / spikes);
                            
                            if (i === 0) {
                                ctx.moveTo(outerX, outerY);
                            } else {
                                ctx.lineTo(outerX, outerY);
                            }
                            ctx.lineTo(innerX, innerY);
                        }
                        ctx.closePath();
                        ctx.fillStyle = this.color;
                        ctx.fill();
                        
                        // 光晕效果
                        ctx.beginPath();
                        ctx.arc(0, 0, outerRadius * 1.8, 0, Math.PI * 2);
                        ctx.strokeStyle = this.color;
                        ctx.lineWidth = 1.5;
                        ctx.stroke();
                    } else {
                        // 普通粒子 - 圆形
                        ctx.beginPath();
                        ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
                        ctx.fillStyle = this.color;
                        ctx.fill();
                        
                        // 光晕效果
                        ctx.beginPath();
                        ctx.arc(0, 0, this.radius * 1.5, 0, Math.PI * 2);
                        ctx.strokeStyle = this.color;
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                    
                    ctx.restore();
                }
                
                update() {
                    this.velocity.y += 0.05; // 重力
                    this.x += this.velocity.x;
                    this.y += this.velocity.y;
                    this.alpha -= this.decay;
                    this.life++;
                    this.angle += this.rotationSpeed;
                    
                    this.draw();
                    return this.alpha > 0 && this.life < this.maxLife;
                }
            }
            
            // 高级烟花类
            class Firework {
                constructor(x, y, targetX, targetY, color, isFinal = false) {
                    this.x = x;
                    this.y = y;
                    this.targetX = targetX;
                    this.targetY = targetY;
                    this.color = color;
                    this.speed = random(8, 12);
                    this.angle = Math.atan2(targetY - y, targetX - x);
                    this.velocity = {
                        x: Math.cos(this.angle) * this.speed,
                        y: Math.sin(this.angle) * this.speed
                    };
                    this.radius = isFinal ? 5 : 3;
                    this.exploded = false;
                    this.isFinal = isFinal;
                    this.trail = [];
                    this.maxTrail = isFinal ? 20 : 10;
                    this.sparkTimer = 0;
                }
                
                draw() {
                    // 绘制尾迹
                    for (let i = 0; i < this.trail.length; i++) {
                        const pos = this.trail[i];
                        const alpha = i / this.trail.length;
                        const radius = this.radius * alpha;
                        
                        ctx.beginPath();
                        ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
                        ctx.fillStyle = this.color.replace(')', `, ${alpha})`).replace('rgb', 'rgba');
                        ctx.fill();
                        
                        // 尾迹光晕
                        ctx.beginPath();
                        ctx.arc(pos.x, pos.y, radius * 1.5, 0, Math.PI * 2);
                        ctx.strokeStyle = this.color.replace(')', `, ${alpha * 0.5})`).replace('rgb', 'rgba');
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                    
                    // 绘制烟花主体
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                    
                    // 光晕效果
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius * 2, 0, Math.PI * 2);
                    ctx.strokeStyle = this.color;
                    ctx.lineWidth = 1;
                    ctx.stroke();
                    
                    // 闪烁效果
                    if (this.isFinal) {
                        this.sparkTimer++;
                        if (this.sparkTimer % 5 === 0) {
                            this.radius = random(4, 6);
                        }
                    }
                }
                
                explode() {
                    this.exploded = true;
                    
                    // 创建爆炸粒子
                    const particleCount = this.isFinal ? 400 : 200;
                    for (let i = 0; i < particleCount; i++) {
                        particles.push(new Particle(
                            this.x, 
                            this.y, 
                            this.isFinal ? colors[random(0, colors.length, true)] : this.color,
                            this.isFinal && i % 15 === 0
                        ));
                    }
                    
                    // 如果是最终烟花，显示消息
                    if (this.isFinal) {
                        setTimeout(() => {
                            finalMessage.textContent = `${loverName}，我喜欢你！`;
                            finalMessage.style.opacity = '1';
                            finalMessage.style.transform = 'translate(-50%, -50%) scale(1.1)';
                            
                            // 添加一些额外的粒子
                            setTimeout(() => {
                                for (let i = 0; i < 100; i++) {
                                    particles.push(new Particle(
                                        random(0, canvas.width),
                                        random(0, canvas.height / 2),
                                        colors[random(0, colors.length, true)],
                                        true
                                    ));
                                }
                            }, 500);
                        }, 800);
                    }
                }
            }
            
            // 开始放烟花
            function startFireworks() {
                // 先放几组普通烟花
                const baseDelay = isDateValid ? 300 : 400; // 非520日烟花间隔稍长
                
                for (let i = 0; i < 15; i++) {
                    setTimeout(() => {
                        const x = random(0, canvas.width);
                        const y = canvas.height;
                        const targetX = random(canvas.width * 0.1, canvas.width * 0.9);
                        const targetY = random(canvas.height * 0.2, canvas.height * 0.5);
                        const color = colors[random(0, colors.length, true)];
                        
                        fireworks.push(new Firework(x, y, targetX, targetY, color));
                    }, i * baseDelay);
                }
                
                // 最后放一个超大型烟花显示名字
                setTimeout(() => {
                    const x = random(canvas.width * 0.3, canvas.width * 0.7);
                    const y = canvas.height;
                    const targetX = canvas.width / 2;
                    const targetY = canvas.height / 3;
                    const color = isDateValid ? '#ff69b4' : colors[random(0, colors.length, true)];
                    
                    fireworks.push(new Firework(x, y, targetX, targetY, color, true));
                    
                    // 如果是520日，额外多放几个烟花
                    if (isDateValid) {
                        setTimeout(() => {
                            for (let i = 0; i < 5; i++) {
                                setTimeout(() => {
                                    const x = random(0, canvas.width);
                                    const y = canvas.height;
                                    const targetX = random(canvas.width * 0.2, canvas.width * 0.8);
                                    const targetY = random(canvas.height * 0.1, canvas.height * 0.4);
                                    const color = colors[random(0, colors.length, true)];
                                    
                                    fireworks.push(new Firework(x, y, targetX, targetY, color));
                                }, i * 500);
                            }
                        }, 2000);
                    }
                }, 7000);
            }
            
            // 动画循环
            function animate() {
                requestAnimFrame(animate);
                
                // 清除画布 - 使用矩形填充代替clearRect提升性能
                ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新烟花
                for (let i = fireworks.length - 1; i >= 0; i--) {
                    fireworks[i].draw();
                    
                    if (!fireworks[i].exploded) {
                        // 添加当前位置到尾迹
                        fireworks[i].trail.push({ x: fireworks[i].x, y: fireworks[i].y });
                        if (fireworks[i].trail.length > fireworks[i].maxTrail) {
                            fireworks[i].trail.shift();
                        }
                        
                        fireworks[i].x += fireworks[i].velocity.x;
                        fireworks[i].y += fireworks[i].velocity.y;
                        
                        // 检查是否到达目标位置
                        const distance = Math.hypot(
                            fireworks[i].targetX - fireworks[i].x,
                            fireworks[i].targetY - fireworks[i].y
                        );
                        
                        if (distance < 10) {
                            fireworks[i].explode();
                        }
                    } else {
                        fireworks.splice(i, 1);
                    }
                }
                
                // 更新粒子
                for (let i = particles.length - 1; i >= 0; i--) {
                    if (!particles[i].update()) {
                        particles.splice(i, 1);
                    }
                }
            }
            
            // 窗口大小调整 - 节流处理
            const handleResize = throttle(function() {
                canvasWidth = window.innerWidth;
                canvasHeight = window.innerHeight;
                canvas.width = canvasWidth;
                canvas.height = canvasHeight;
            }, 200);
            
            window.addEventListener('resize', handleResize);
            
            // 网络状态检测
            window.addEventListener('online', () => {
                isOnline = true;
            });
            
            window.addEventListener('offline', () => {
                isOnline = false;
            });
            
            // 开始加载
            simulateLoading();
            
            // 开始动画
            animate();
        });
    </script>
</body>
</html>